<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c"
           uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid" %>
<html>
<head>
    <rapid:block name="head"></rapid:block>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/layui.css">
    <style type="text/css">
        .layui-nav-item.side a {
            font-size: 22px;
            margin: 10px;
        }
        /*解决Chrome下表单自动填充后背景色为黄色*/
        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
        }
        .oyj-kn {
            background-image: url("/static/images/oyj/kn.gif");
            background-color: rgba(255,218,185,0.3);
            background-size: cover;
            width: 150px;
            height: 190px;

        }
        .oyj {
            position: absolute;
            top: 200px;
            z-index: 15;

        }
    </style>
</head>
<body class="layui-layout-body" style="padding:10px 50px;">
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<div class="oyj">
    <img src="/static/images/oyj/small.png" style="width: 20px; height: 20px" class="oyj-change">
    <div class="oyj-kn" draggable="true"> </div>
</div>

<ul class="layui-nav" style="background-color: #FFDAB9">
    <li class="layui-nav-item"><a href="<%=basePath%>teacher/teacherIndex" style="font-size:20px;">首页</a></li>
    <!--这里${requestScope}取不到值，需要改为${param}-->
    <li class="layui-nav-item"><a href="<%=basePath%>teacher/teacherInfo?teaid=${sessionScope.teaid}" style="font-size:20px;">个人资料</a></li>
    <li class="layui-nav-item "><a href="<%=basePath%>teacher/courseList?page=1" style="font-size:20px;">我的课程信息</a></li>
    <li class="layui-nav-item" style="float:right; "><a href="<%=basePath%>exit" style="font-size: 20px;">退出登录</a></li>
    <li class="layui-nav-item" style="float:right; font-size:20px;"><i class="layui-icon" style="font-size:18px;" >&#xe612;</i>${sessionScope.username}&nbsp;</li>
</ul>
<rapid:block name="content"></rapid:block>
<script src="${pageContext.request.contextPath}/static/layui.all.js"></script>
<script  src="/static/js/jquery-3.3.1.js"></script>
<script>
    function getSessinStorage(key, defaultValue) {
        return sessionStorage.getItem(key) ? sessionStorage.getItem(key) : defaultValue
    }
    function setSeessionStorage(key, value) {
        sessionStorage.setItem(key, value)
    }


    var oyj = $(".oyj")[0]
    var oyjKn = $(".oyj-kn")[0]
    var oyjChange = $(".oyj-change")[0]
    var offsetX
    var offsetY
    var knX = getSessinStorage("knX", 0);
    var knY = getSessinStorage("knY", 200);
    var oyjChangeStatus = getSessinStorage("knStatus", 0)// 0展开 1缩放

    // 对康奈进行隐藏
    function setKnSmall() {
        $(oyjKn).css("background-image", "url()").css("background-color", "rgba(0,0,0,0)")
        $(oyjChange).attr("src", "/static/images/oyj/big.png")

    }
    // 对康奈进行展开
    function setKnBig() {
        $(oyjKn).css("background-image", "url(/static/images/oyj/kn.gif)").css("background-color", "rgba(255,218,185,0.3)")
        $(oyjChange).attr("src", "/static/images/oyj/small.png")
    }

    function initKNStatus(oyjChangeStatus) {
        if (oyjChangeStatus == 0) {// 当前为展开状态
            setKnBig()
        } else {
            setKnSmall()
        }
    }

    // 初始化康奈人物的坐标及状态
    oyj.style.top = knX + "px"
    oyj.style.left = knY + "px"
    initKNStatus(oyjChangeStatus)

    $(oyjChange).click(function () {
        if (oyjChangeStatus == 0) {// 进行缩放
            setKnSmall()
            oyjChangeStatus = 1
        } else {
            setKnBig()
            oyjChangeStatus = 0
        }
        // 记录康奈的缩放状态
        setSeessionStorage("knStatus", oyjChangeStatus)
    })

    oyj.ondragstart = function (event) {
        console.log("拖放开始")
        offsetX = event.offsetX;
        offsetY = event.offsetY;
        // 存储康奈的位置

    }

    oyj.ondrag = function (event) {
        var x = event.pageX;
        var y = event.pageY;
        console.log(x+'-'+y);
        //drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
        if(x == 0 && y == 0){
            return; //不处理拖动最后一刻X和Y都为0的情形
        }
        console.log("offsetXY" + offsetX + ":" + offsetY)
        x -= offsetX;
        y -= offsetY;
        oyj.style.left = x + 'px';
        oyj.style.top = y + 'px';
    }
    oyj.ondragend = function () {
        console.log("源对象拖动结束")
        // 将康奈人物的坐标进行存储
        var x = parseInt(oyj.style.top)
        var y = parseInt(oyj.style.left)
        setSeessionStorage("knX", x)
        setSeessionStorage("knY", y)
    }




</script>
</body>
</html>